<template>
  <div class="coin-price">
    <div class="top pointer" @click.stop="SET_SHOW_COINPRICE(!showCoinPrice)">
      <ul class="clearfix">
        <li v-for="(v,k) in coinTypeListTop" :key="k" class="fl">
          <i class="currency" :class="'icon-'+v"/>&ensp;{{v.toUpperCase()}}&emsp;<spinner color="rgba(255, 255, 255, 0.5)" v-if="bPriceDataInitLoading"/><template v-else>$ <cu class="val" :val="bPriceData[v] | num" :decimals="2"></cu></template>
        </li>
      </ul>
      <i class="iconfont icon-xiala" :class="{active:showCoinPrice}"/>
    </div>
    <transition name="fade">
      <div v-show="showCoinPrice" @click.stop="()=>{}" class="bottom">
        <ul class="clearfix">
          <li v-for="(v,k) in coinTypeListBottom" :key="k" class="fl pointer">
            <i class="currency" :class="'icon-'+v"/>&ensp;{{v.toUpperCase()}}&emsp;<spinner color="#333" v-if="bPriceDataInitLoading"/><template v-else>$ <cu class="val" :val="bPriceData[v] | num" :decimals="2"></cu></template>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
import { bprice } from '@/api';
import spinner from '@/components/Spinner';
import cu from '@/components/CountUp';
import { mapGetters, mapMutations } from 'vuex';

export default {
  components: {
    spinner,
    cu,
  },
  data() {
    return {
      coinTypeList: [
        'btc',
        'bch',
        'bsv',
        'eth',
        'dcr',
        'zec',
        'etp',
      ],
      bPriceData: {
        btc: 0,
        bch: 0,
        bsv: 0,
        buc: 0,
        dcr: 0,
        eth: 0,
        zec: 0,
        etp: 0,
      },
      bPriceDataInitLoading: true,
      bPriceDataLoading: false,
      timer: null,
    };
  },
  computed: {
    ...mapGetters(['showCoinPrice']),
    coinTypeListTop() {
      return this.coinTypeList.slice(0, 4);
    },
    coinTypeListBottom() {
      return this.coinTypeList.slice(4);
    },
  },
  created() {
    this.getBprice();
    this.timer = setInterval(() => {
      this.getBprice();
    }, 900000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    ...mapMutations(['SET_SHOW_COINPRICE']),
    getBprice() {
      if (this.bPriceDataLoading) {
        return;
      }
      this.bPriceDataLoading = true;
      bprice().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.bPriceData = Object.assign(this.bPriceData, data);
        }
        this.bPriceDataInitLoading = false;
        this.bPriceDataLoading = false;
      }).catch(() => {
        this.bPriceDataInitLoading = false;
        this.bPriceDataLoading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.coin-price{
  position: relative;
  .top,.bottom{
    ul{
      li{
        width: 120px;
        margin-left: 15px;
        // text-align: center;
        &:nth-of-type(4n+1) {
          margin-left: 0;
        }
        .currency{
          width: 12px;
          height: 12px;
          display: inline-block;
          vertical-align: top;
          margin-top: 13px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          &.icon-bch{
            width: 16px;
            margin-top: 11px;
            height: 16px;
            background-size: 16px 16px;
          }
        }
      }
    }
  }
  .top{
    width: 545px;
    height: 40px;
    &:hover{
      color: #fff;
      ul{
        .currency{
          @each $coinType in btc,bch,bsv,eth {
            &.icon-#{$coinType}{
              background-image: url(../../assets/images/header/#{$coinType}_active.png);
            }
          }
        }
      }
    }
    ul{
      display: inline-block;
      .currency{
        @each $coinType in btc,bch,bsv,eth {
          &.icon-#{$coinType}{
            background-image: url(../../assets/images/header/#{$coinType}.png);
          }
        }
        &.icon-eth{
          background-size: 8px 12px;
        }
      }
    }
    .icon-xiala {
      vertical-align: top;
      display: inline-block;
      transition: all 0.2s;
      &.active {
        transform: rotate(180deg);
      }
    }
  }
  .bottom{
    width: 565px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 3px;
    border: solid 1px #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
    color: #333333;
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.2s;
    }
    &.fade-enter,
    &.fade-leave-to {
      opacity: 0;
      top: 40px;
    }
    &::before {
      content: " ";
      position: absolute;
      border-left: solid 1px #e4e7ed;
      border-top: solid 1px #e4e7ed;
      display: block;
      top: -4px;
      left: 50%;
      width: 7px;
      height: 7px;
      transform: translateX(-50%) rotate(45deg);
      background-color: #fff;
    }
    ul{
      li{
        &:hover{
          color: #70c1b3;
        }
        .currency{
          @each $coinType in dcr,etp,zec {
            &.icon-#{$coinType}{
              background-image: url(../../assets/images/home/icon-#{$coinType}.png);
            }
          }
        }
      }
    }
  }
}
</style>
